<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highsecondary" content="no">
    <meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">

    <title>SOR维护</title>
    <!-- <link href="lib/css/meterial-icons.css" rel="stylesheet"> -->
    <link href="../lib/fonts/material-icons.css?family=Material+Icons" rel="stylesheet">
    <link href="../lib/css/animate.min.css" rel="stylesheet">
    <link href="../lib/css/quasar.mat.rtl.min.css" rel="stylesheet" type="text/css">
    
    <style type="text/css">
      [v-cloak] { display: none }
      div.q-field-vertical .q-field-label+.q-field-content { padding-top: 0!important }
      .search-group-left { font-size: 13px; border: 1px solid #ccc; padding: 3px 6px!important; border-radius: 3px 0 0 3px; border-right: none }
      .search-group-right { font-size: 13px;border: 1px solid #ccc; padding: 3px 6px!important; border-radius: 0 3px 3px 0 }
      .ant-input { font-size: 13px;border: 1px solid #ccc; padding: 3px 6px!important; border-radius: 3px }
    </style>
  </head>
  <body>
    <div id="q-sorMaintenance" v-cloak class="q-pa-sm">
      <q-layout>
        <q-page-container>
          <q-tabs inverted color="primary" v-model="currentStep">
            <q-tab slot="title" name="base" label="基本信息"></q-tab>
            <q-tab :disable="disable" slot="title" name="details" label="明细"></q-tab>
            <q-tab :disable="disable" slot="title" name="plan" label="计划"></q-tab>

            <q-tab-pane name="base" class="relative-position">
              <q-card class="bg-white no-shadow full-width">
                <q-card-main class="row justify-between gutter-y-xs gutter-x-sm">
                  <q-field 
                    label="源SOR编码"
                    orientation="vertical"
                    class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <q-input 
                      v-model.trim="baseAddOrEditForm.erpCode" ></q-input>
                  </q-field>
                  <q-field 
                    label="SOR名称"
                    orientation="vertical"
                    :error="$v.baseAddOrEditForm.name.$error"
                    error-label="该字段为必填项"
                    class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <q-input 
                      @blur="$v.baseAddOrEditForm.name.$touch"
                      v-model.trim="baseAddOrEditForm.name" ></q-input>
                  </q-field>
                  <q-field 
                    label="源项目编码"
                    orientation="vertical"
                    class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <q-input 
                      v-model.trim="baseAddOrEditForm.projectCode" ></q-input>
                  </q-field>
                  <q-field 
                    label="项目计划开始时间"
                    orientation="vertical"
                    class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <q-datetime 
                      type="datetime"
                      format="YYYY-MM-DD HH-mm"
                      format-model="string"
                      :max="baseAddOrEditForm.projectEndTime"
                      v-model="baseAddOrEditForm.projectStartTime" ></q-datetime>
                  </q-field>
                  <q-field 
                    label="项目计划结束时间"
                    orientation="vertical"
                    class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <q-datetime 
                      type="datetime"
                      format="YYYY-MM-DD HH:mm"
                      format-model="string"
                      :min="baseAddOrEditForm.projectStartTime"
                      v-model="baseAddOrEditForm.projectEndTime" ></q-datetime>
                  </q-field>
                  <q-field 
                    label="要求定点时间"
                    orientation="vertical"
                    :error="$v.baseAddOrEditForm.requiredFinishTime.$error"
                    error-label="该字段为必填项"
                    class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <q-datetime 
                      type="datetime"
                      format="YYYY-MM-DD HH:mm"
                      format-model="string"
                      @blur="$v.baseAddOrEditForm.requiredFinishTime.$touch"
                      v-model="baseAddOrEditForm.requiredFinishTime" ></q-datetime>
                  </q-field>
                  <q-field 
                    label="SOR申请人"
                    orientation="vertical"
                    :error="$v.baseAddOrEditForm.proposerId.$error"
                    error-label="该字段为必填项"
                    class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <h-select-table 
                      :value="baseAddOrEditForm.proposerId"
                      :label="proposerName" 
                      label-field="name"
                      value-field="id"
                      :search-options="searchOptions"
                      :readonly="true"
                      url="/manager/user/userData/getUserList"
                      :columns="personColumns"
                      selection="single"
                      @select="personChanged"
                    ></h-select-table>
                  </q-field>
                  <q-field 
                    label="公司"
                    orientation="vertical"
                    class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <q-select 
                      :options="companyOptions"
                      v-model.trim="baseAddOrEditForm.companyId" ></q-select>
                  </q-field>
                  <q-field 
                    label="申请部门"
                    orientation="vertical"
                    class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <q-input 
                      v-model.trim="baseAddOrEditForm.depName" ></q-input>
                  </q-field>
                  <q-field 
                    label="备注"
                    orientation="vertical"
                    class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <q-input 
                      type="textarea"
                      rows="4"
                      v-model.trim="baseAddOrEditForm.remark" ></q-input>
                  </q-field>
                </q-card-main>
              </q-card>
              <div class="q-px-md">
                <q-btn 
                  color="primary" 
                  label="保存并继续" 
                  push 
                  :loading="btnLoadingSave"
                  @click="baseInfoSave">
                </q-btn>
              </div>
              <q-inner-loading :visible="visible">
                <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
              </q-inner-loading>
            </q-tab-pane>
            <q-tab-pane name="details" class="relative-position">
              <q-card class="bg-white no-shadow full-width">
                <q-card-main class="q-pa-none">
                  <q-table
                    class="no-shadow"
                    :data="viewData"
                    dense
                    :columns="columns"
                    :rows-per-page-options="[5, 10, 20]"
                    selection="multiple"
                    :loading="listLoading"
                    :selected.sync="selected"
                    :pagination.sync="serverPagination"
                    row-key="id"
                  >
                    <template slot="top-right" slot-scope="props">
                      <q-input 
                        class="search-group-left"
                        hide-underline
                        placeholder="输入名称、编码"
                        v-model.trim="searchForm.value"></q-input>
                      <q-select 
                        class="search-group-right"
                        hide-underline
                        radio
                        :options="[{ label:'名称', value: 'matName' }, { label:'编码', value: 'matCode' }]"
                        v-model="searchForm.key"></q-select>
                      <q-btn
                        size="sm"
                        color="primary"
                        :loading="btnLoadingSearch"
                        @click="searchDetails"
                        class="q-ml-sm q-pa-sm">
                        <span slot="loading">
                          <q-spinner-hourglass></q-spinner-hourglass>
                          搜索中
                        </span>
                        <q-icon name="search"></q-icon>
                        <span>{{ $t('查询') }}</span>
                      </q-btn>
                      <q-btn
                        size="sm"
                        color="secondary"
                        @click="resetDetails"
                        :loading="btnLoadingReset"
                        class="q-ml-sm q-pa-sm">
                        <span slot="loading">
                          <q-spinner-hourglass></q-spinner-hourglass>
                          重置中
                        </span>
                        <q-icon name="refresh" ></q-icon>
                        <span>{{ $t('重置') }}</span>
                      </q-btn>
                    </template>
                    <template slot="top-left" slot-scope="props">
                      <q-btn
                        color="primary"
                        outline
                        size="xs"
                        :label="$t('新增')"
                        @click="detailsModalOpen(1)"
                        class="q-mr-sm" ></q-btn>
                      <q-btn
                        color="negative"
                        outline
                        size="xs"
                        :label="$t('删除')"
                        @click="detailsDelConfirm"
                        class="q-mr-sm"></q-btn>
                    </template>
                    <div slot="pagination" slot-scope="props" class="row flex-center q-py-sm">
                      第
                      <q-pagination
                        v-model="serverPagination.page"
                        input
                        boundary-links
                        direction-links
                        color="primary"
                        :max-pages="5"
                        :ellipses="true"
                        :max="pages"></q-pagination>
                      页 &nbsp; 共 {{ total }} 条
                    </div>
                    <template slot="body" slot-scope="props">
                      <q-tr
                        :props="props"
                      >
                        <q-td >
                          <q-checkbox color="primary" v-model="props.selected"></q-checkbox>
                        </q-td>
                        <q-td key="action" :props="props" >
                          <q-btn
                            flat
                            size="xs"
                            color="primary"
                            @click="detailsModalOpen(2, props.row)"
                          >
                            {{ $t('修改') }}
                          </q-btn>
                        </q-td>
                        <q-td key="carSeriesName" :props="props" >
                          {{ props.row.carSeriesName }}
                        </q-td>
                        <q-td key="matCode" :props="props" >
                          {{ props.row.matCode }}
                        </q-td>
                        <q-td key="matName" :props="props" >
                          {{ props.row.matName }}
                        </q-td>
                        <q-td key="matState" :props="props" >
                          <q-chip v-if="props.row.matState == 1" dense square color="info">新开发</q-chip>
                          <q-chip v-if="props.row.matState == 2" dense square color="info">借用件</q-chip>
                          <q-chip v-if="props.row.matState == 3" dense square color="info">改制件</q-chip>
                        </q-td>
                        <q-td key="quantity" :props="props" >
                          {{ props.row.quantity }}
                        </q-td>
                        <q-td key="carQuantity" :props="props" >
                          {{ props.row.carQuantity }}
                        </q-td>
                        <q-td key="unitName" :props="props" >
                          {{ props.row.unitName }}
                        </q-td>
                        <q-td key="matCategoryName" :props="props" >
                          {{ props.row.matCategoryName }}
                        </q-td>
                        <q-td key="costEngineerUserName" :props="props" >
                          {{ props.row.costEngineerUserName }}
                        </q-td>
                        <q-td key="targetPrice" :props="props" >
                          {{ props.row.targetPrice }}
                        </q-td>
                        <q-td key="currencyName" :props="props" >
                          {{ props.row.currencyName }}
                        </q-td>
                        <q-td key="taxCode" :props="props" >
                          {{ props.row.taxCode }}
                        </q-td>
                        <q-td key="deliveryTime" :props="props" >
                          {{ props.row.deliveryTime }}
                        </q-td>
                        <q-td key="minOrderQty" :props="props" >
                          {{ props.row.minOrderQty }}
                        </q-td>
                      </q-tr>
                    </template>
                  </q-table>
                </q-card-main>
              </q-card>
              <q-inner-loading :visible="visible">
                <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
              </q-inner-loading>
            </q-tab-pane>
            <q-tab-pane name="plan" class="relative-position">
              <q-card class="bg-white no-shadow full-width">
                <q-card-main>
                  <q-table
                    class="no-shadow"
                    :data="planData"
                    dense
                    :columns="columnsPlan"
                    :loading="listLoading"
                    :rows-per-page-options="[0]"
                    :pagination.sync="pagination"
                    hide-bottom
                    row-key="id"
                  >
                    <div slot="pagination" slot-scope="props" class="row flex-center q-py-sm">
                      <q-pagination
                        v-model="pagination.page"></q-pagination>
                    </div>
                    <!-- <template slot="top-left" slot-scope="props">
                      <q-btn
                        color="primary"
                        outline
                        size="xs"
                        label="新增"
                        class="q-mr-sm" ></q-btn>
                      <q-btn
                        color="negative"
                        outline
                        size="xs"
                        label="删除"
                        class="q-mr-sm" ></q-btn>
                    </template> -->
                    <template slot="body" slot-scope="props">
                      <q-tr
                        :props="props"
                      >
                        <q-td key="stepName" :props="props" >
                          {{ props.row.stepName }}
                        </q-td>
                        <q-td key="planStartTime" :props="props" width="220">
                          <q-datetime 
                            type="datetime"
                            placeholder="请选择计划开始时间"
                            color="secondary"
                            format="YYYY-MM-DD HH:mm"
                            format-model="string"
                            hide-underline
                            class="ant-input"
                            v-model="props.row.planStartTime" ></q-datetime>
                        </q-td>
                        <q-td key="planEndTime" :props="props" width="220">
                          <q-datetime 
                            type="datetime"
                            placeholder="请选择计划结束时间"
                            color="secondary"
                            format="YYYY-MM-DD HH:mm"
                            format-model="string"
                            hide-underline
                            class="ant-input"
                            v-model="props.row.planEndTime" ></q-datetime>
                        </q-td>
                        <q-td key="realStartTime" :props="props" >
                          {{ props.row.realStartTime }}
                        </q-td>
                        <q-td key="realEndTime" :props="props" >
                          {{ props.row.realEndTime }}
                        </q-td>
                      </q-tr>
                    </template>
                  </q-table>
                </q-card-main>
              </q-card>
              <div class="q-px-md">
                <q-btn 
                  push 
                  color="primary" 
                  :loading="btnLoadingSave"
                  @click="planSave" 
                  label="保存" ></q-btn>
                <q-btn 
                  flat 
                  color="secondary" 
                  @click="window.location.href = 'sorManage.html'" 
                  label="返回主视图" 
                  class="q-ml-sm"></q-btn>
              </div>
              <q-inner-loading :visible="visible">
                <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
              </q-inner-loading>
            </q-tab-pane>
          </q-tabs>
          <q-fab
            class="absolute"
            style="top: 20px; right: 20px"
            color="primary"
            icon="keyboard_arrow_down"
            direction="left"
          >
            <q-fab-action color="secondary" icon="arrow_back" @click="window.location.href='./sorManage.html'">
              <q-tooltip anchor="bottom middle" self="top middle" :offset="[0, 10]">返回</q-tooltip>
            </q-fab-action>
            <q-fab-action v-if="baseAddOrEditForm.status != 1" color="primary" icon="save" @click="activeConfirm">
              <q-tooltip anchor="bottom middle" self="top middle" :offset="[0, 10]">激活</q-tooltip>
            </q-fab-action>
          </q-fab>
        </q-page-container>
      </q-layout>
      <!-- 新增 or 编辑 明细 -->
      <q-modal no-backdrop-dismiss v-model="detailsAddOrEditModal" :content-css="{minWidth: '77vw', minHeight: '550px',borderRadius: '4px'}">
        <q-modal-layout>
          <q-toolbar slot="header" color="white">
            <q-toolbar-title class="text-dark">
              <span>{{ detailsAddOrEdit == 1 ? $t("新增") : $t("编辑")  }}</span>
            </q-toolbar-title>
            <q-btn flat @click="detailsAddOrEditModal = false">
              <q-icon name="close" color="dark"></q-icon>
            </q-btn>
          </q-toolbar>
          <q-card class="q-px-md q-py-sm bg-white no-shadow full-width">
            <q-card-main class="row gutter-x-md gutter-y-xs">
              <q-field 
                label="零件编码"
                orientation="vertical"
                class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                <h-select-table 
                  :value="rowAddOrEditForm.matId" 
                  :label="rowAddOrEditForm.matCode" 
                  label-field="code"
                  value-field="id"
                  :search-options="searchOptions"
                  :readonly="true"
                  url="/manager/admin/material/getMaterials"
                  :columns="codeColumns"
                  selection="single"
                  @select="codeChanged"
                ></h-select-table>
              </q-field>
              <q-field 
                label="零件名称"
                orientation="vertical"
                :error="$v.rowAddOrEditForm.matName.$error"
                error-label="该字段为必填项"
                class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                <q-input 
                  :readonly="true"
                  @blur="$v.rowAddOrEditForm.matName.$touch"
                  v-model.trim="rowAddOrEditForm.matName"></q-input>
              </q-field>
              <q-field 
                label="所属车型"
                orientation="vertical"
                class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                <q-input v-model.trim="rowAddOrEditForm.carSeriesName"></q-input>
              </q-field>
              <q-field 
                label="品类"
                orientation="vertical"
                class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                <h-select-tree
                  url="/manager/rfq/main/getSorcingClassifyTree"
                  :value="rowAddOrEditForm.matCategoryCode"
                  :label="rowAddOrEditForm.matCategoryName"
                  value-field="sysCode"
                  label-field="text"
                  no-check-label="若暂无所需品类请勾选此项"
                  @ticked="ticked"
                ></h-select-tree>
              </q-field>
              <q-field 
                label="零件状态"
                orientation="vertical"
                :error="$v.rowAddOrEditForm.matState.$error"
                error-label="该字段为必填项"
                class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                <q-select 
                  :options="matStateOptions"
                  @blur="$v.rowAddOrEditForm.matState.$touch"
                  v-model="rowAddOrEditForm.matState"></q-select>
              </q-field>
              <q-field 
                label="需求数量"
                orientation="vertical"
                :error="$v.rowAddOrEditForm.quantity.$error"
                error-label="该字段为必填项"
                class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                <q-input 
                  @blur="$v.rowAddOrEditForm.quantity.$touch"
                  v-model.trim="rowAddOrEditForm.quantity"></q-input>
              </q-field>
              <q-field 
                label="单位"
                orientation="vertical"
                :error="$v.rowAddOrEditForm.unitId.$error"
                error-label="该字段为必填项"
                class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                <q-select 
                  filter
                  :options="unitOptions"
                  @blur="$v.rowAddOrEditForm.unitId.$touch"
                  v-model.trim="rowAddOrEditForm.unitId"></q-select>
              </q-field>
              <q-field 
                label="单车用量"
                orientation="vertical"
                class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                <q-input v-model.trim="rowAddOrEditForm.carQuantity"></q-input>
              </q-field>
              <q-field 
                label="成本工程师"
                orientation="vertical"
                class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                <h-select-table 
                  :value="rowAddOrEditForm.costEngineerUserId" 
                  :label="rowAddOrEditForm.costEngineerUserName" 
                  label-field="name"
                  value-field="id"
                  :search-options="searchOptions"
                  :readonly="true"
                  url="/manager/user/userData/getUserList"
                  :columns="costColumns"
                  selection="single"
                  @select="costChanged"
                ></h-select-table>
              </q-field>
              <q-field 
                label="零件图号"
                orientation="vertical"
                class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                <q-input 
                  v-model.trim="rowAddOrEditForm.matPictureCode"></q-input>
              </q-field>
              <q-field 
                label="目标含税单价"
                orientation="vertical"
                :error="$v.rowAddOrEditForm.targetPrice.$error"
                error-label="请输入数字"
                class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                <q-input 
                  @blur="$v.rowAddOrEditForm.targetPrice.$touch"
                  v-model.trim="rowAddOrEditForm.targetPrice"></q-input>
              </q-field>
              <q-field 
                label="货币"
                orientation="vertical"
                :error="$v.rowAddOrEditForm.currencyId.$error"
                error-label="该字段为必填项"
                class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                <q-select 
                  filter
                  :options="currencyOptions"
                  @blur="$v.rowAddOrEditForm.currencyId.$touch"
                  v-model="rowAddOrEditForm.currencyId"></q-select>
              </q-field>
              <q-field 
                label="税码"
                orientation="vertical"
                class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                <q-select 
                  filter
                  :options="taxCodeOptions"
                  v-model.trim="rowAddOrEditForm.taxCode"></q-select>
              </q-field>
              <q-field 
                label="计划要货时间（天数）"
                orientation="vertical"
                class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                <q-input v-model.trim="rowAddOrEditForm.deliveryTime"></q-input>
              </q-field>
              <q-field 
                label="最小订单数量"
                orientation="vertical"
                class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
                <q-input v-model.trim="rowAddOrEditForm.minOrderQty"></q-input>
              </q-field>
            </q-card-main>
          </q-card>
          <q-toolbar slot="footer" color="white" class="row justify-end">
            <q-btn
              glossy
              :loading="btnLoading"
              color="primary"
              v-if="detailsAddOrEdit == 1"
              @click="detailsSaveConfirm(1)">{{$t("保存")}}</q-btn>
            <q-btn
              glossy
              :loading="btnLoading"
              color="primary"
              v-else
              @click="detailsSaveConfirm(2)">{{$t("保存")}}</q-btn>
            <q-btn
              glossy
              color="secondary"
              class="q-ml-sm"
              @click="detailsAddOrEditModal = false">{{$t("取消")}}</q-btn>
          </q-toolbar>
        </q-modal-layout>
      </q-modal>
    </div>
    
    <!-- ie-polyfill 、 vue.js and quasar-framework -->
    <script src="../lib/js/quasar.ie.polyfills.umd.min.js"></script>
    <script src="../lib/js/vue.js"></script>
    <script src="../lib/js/quasar.mat.umd.min.js"></script>
    <!-- babel for es6 transform -->
    <!-- <script src="lib/js/babel.min.js"></script> -->
    <!-- vue validate -->
    <script src="../lib/js/vuelidate.min.js"></script>
    <script src="../lib/js/validators.min.js"></script>
    <!-- consts ps: always leave this file first -->
    <script src="../script/consts.js"></script>
    <!-- status code -->
    <script src="../script/status.code.js"></script>
    <!-- qs for axios -->
    <script src="../lib/js/qs.min.js"></script>
    <!-- axios for http request -->
    <script src="../lib/js/axios.js"></script>
    <!-- axios.instance must be after axios -->
    <script src="../script/axios.instance2.js"></script>
    <!-- quasar i18n zh-hans -->
    <script src="../lib/lang/zh-hans.js"></script>
    <!-- vue-i18n for application's internationalization -->
    <script src="../lib/js/vue-i18n.js"></script>
    <!-- current page international file -->
    <script src="../lang/sor/sorMaintenance.js"></script>
    <!--  -->
    <script src="../script/utils.js"></script>
    <!-- 本地组件 -->
    <script src="../components/h-select-table.js"></script>
    <script src="../components/h-select-tree.js"></script>

    <script>
      // quasar components use
      Quasar.i18n.set(Quasar.i18n[LANGUGE])
      Vue.prototype.window = window
      Vue.use(window.vuelidate.default)
      var minLength = window.validators.minLength
      var required = window.validators.required
      var email = window.validators.email
      var helpers = window.validators.helpers
      var mustNumber = function(value) {
        return /^\d+(\.\d+)?$|^$/.test(value) || !helpers.req(value)
      }

      var sorMaintenance = new Vue({
        el: '#q-sorMaintenance',
        i18n: i18n,
        data: function () {
          return {
            currentStep: 'base',
            visible: false,
            btnLoading: false,  // 通用 btn loading
            btnLoadingSave: false,
            disable: true,
            addOrEdit: 1, // 1 新增  2 编辑
            currentId: '', // 当前编辑的id
            currentCode: '', // 当前编辑的 code
            // 各种 options
            unitOptions: [],
            taxCodeOptions: [],
            companyOptions: [],
            // 基本信息
            baseAddOrEditForm: {
              erpCode: '',
              name: '',
              projectCode: '',
              projectName: '',
              projectStartTime: '',
              projectEndTime: '',
              requiredFinishTime: '',
              proposerId: '',
              companyId: '',
              depName: ''
            },
            proposerName: '',
            // 明细
            searchForm: {  
              value: '',
              key: 'matName'
            },// 搜索表单
            btnLoadingSearch: false,
            btnLoadingReset: false,
            statusOptions: [  // 状态选项
              {
                label: '请选择',
                value: ' '
              },
              {
                label: '草稿',
                value: 0
              },
              {
                label: '激活',
                value: 1
              }
            ],
            isShowMoreSearch: '', // 是否显示更多搜索
            viewData: [],  // 数据
            total: 0,   // 总条数
            listLoading: false,  // 表单加载状态 通用
            selected: [],  // 已选择行
            serverPagination: {
              page: 1,
              rowsNumber: 5,
              rowsPerPage: 10
            },
            detailsAddOrEdit: 1, // 1 新增  2 编辑
            detailsAddOrEditModal: false,
            codeLoading: false,  // 编码下拉的loading
            currentRowId: '',
            rowAddOrEditForm: {
              matId: '',
              matCode: '',
              matName: '',
              carSeriesName: '',  // 所属车型
              matCategoryCode: '', // 品类
              matCategoryName: '', // 品类
              matState: '',  // 零件状态 （1：新开发 2：借用件 3：改制件）
              quantity: '',  // 需求数量
              unitName: '',  // 单位
              carQuantity: '', // 单车用量
              costEngineerUserName: '',  // 产品工程师
              costEngineerUserId: '',  // 产品工程师
              matPictureCode: '',  // 物料图纸号
              targetPrice: '',  // 目标价格
              currencyId: '',  // 货币
              taxCode: '',
              deliveryTime: '',
              minOrderQty: ''
            },
            searchOptions: [
              {
                label: '名称',
                value: 'search-LIKE_name'
              }
            ],
            matCategoryCodeOptions: [],  // 品类 options
            matStateOptions: [  // 零件状态 options
              {
                label: '新开发',
                value: 1
              },
              {
                label: '借用件',
                value: 2
              },
              {
                label: '改制件',
                value: 3
              }
            ],
            costEngineerUserOptions: [],  // 产品工程师 options
            matPictureCodeOptions: [], // 物料图纸号 options
            currencyOptions: [], // 货币 options
           
            // 计划
            planData: [],
            pagination: {
              page: 1,
              rowsPerPage: 0
            }
          }
        },
        validations: {
          baseAddOrEditForm: {
            name: { required: required },
            requiredFinishTime: { required: required },
            proposerId: { required: required }
          },
          rowAddOrEditForm: {
            matName: { required: required },
            matState: { required: required },
            quantity: { required: required },
            unitId: { required: required },
            currencyId: { required: required },
            targetPrice: { mustNumber: mustNumber }
          }
        },
        computed: {
          columns: function() {
            return [
              {
                name: 'action',
                label: this.$t('操作'),
                align: 'center'
              },
              {
                name: 'carSeriesName',
                label: '车型',
                align: 'center'
              },
              {
                name: 'matCode',
                label: '零件编码',
                align: 'center'
              },
              {
                name: 'matName',
                label: '零件名称',
                align: 'center'
              },
              {
                name: 'matState', // 1：新开发 2：借用件 3：改制件
                label: '零件状态',
                align: 'center'
              },
              {
                name: 'quantity',
                label: '需求数量',
                align: 'center'
              },
              {
                name: 'carQuantity',
                label: '单车用量',
                align: 'center'
              },
              {
                name: 'unitName',
                label: '单位',
                align: 'center'
              },
              {
                name: 'matCategoryName',
                label: '品类',
                align: 'center'
              },
              {
                name: 'costEngineerUserName',
                label: '成本工程师',
                align: 'center'
              },
              {
                name: 'targetPrice',
                label: '目标含税单价',
                align: 'center'
              },
              {
                name: 'currencyName',
                label: '货币',
                align: 'center'
              },
              {
                name: 'taxCode',
                label: '税码',
                align: 'center'
              },
              {
                name: 'deliveryTime',
                label: '计划要货时间（天数）',
                align: 'center'
              },
              {
                name: 'minOrderQty',
                label: '最小订单数量',
                align: 'center'
              },
            ]
          },
          codeColumns: function() {
            return [
              {
                name: 'code',
                label: '编码',
                align: 'center',
                field: 'code',
                sortable: true
              },
              {
                name: 'name',
                label: '名称',
                align: 'center',
                field: 'name'
              },
              {
                name: 'werks',
                label: '工厂',
                align: 'center',
                field: 'werks'
              }
            ]
          },
          costColumns: function() {
            return [
              {
                name: 'name',
                label: '名称',
                align: 'center',
                field: 'name'
              }
            ]
          },
          personColumns: function() {
            return [
              {
                name: 'name',
                label: '名称',
                align: 'center',
                field: 'name'
              },
              {
                name: 'email',
                label: '邮件',
                align: 'center',
                field: 'email'
              }
            ]
          },
          pages: function() {
            return Math.ceil(this.total / this.serverPagination.rowsPerPage)
          },
          columnsPlan: function() {
            return [
              {
                name: 'stepName',
                label: '阶段名称',
                align: 'center'
              },
              {
                name: 'planStartTime',
                label: '计划开始时间',
                align: 'center'
              },
              {
                name: 'planEndTime',
                label: '计划结束时间',
                align: 'center'
              },
              {
                name: 'realStartTime',
                label: '实际开始时间',
                align: 'center'
              },
              {
                name: 'realEndTime',
                label: '实际结束时间',
                align: 'center'
              }
            ]
          }
        },
        created: function () {
          var args = GetRequest()
          this.addOrEdit = args.addOrEdit
          // 如果是编辑
          if (this.addOrEdit == 2) {
            this.currentId = args.id
            this.currentCode = args.code
            this.disable = false
            this.baseInfoDataGet(this.currentId)
          }
          this.currencyDataGet()
          this.unitDataGet()
          this.taxCodeDataGet()
          this.companyDataGet()
        },
        watch: {
          currentStep: function(currentStep) {
            if (currentStep == 'base') {
              this.baseInfoDataGet(this.currentId)
            }
            if (currentStep == 'details') {
              this.detailsDataGet({
                pagination: this.serverPagination
              })
            }
            if (currentStep == 'plan') {
              this.planDataGet()
            }
          },
        },
        methods: {
          // 编辑时  获取基本信息
          baseInfoDataGet: function(currentId) {
            this.visible = true
            var that = this
            axios({
              method: 'post',
              url: '/manager/sor/main/getMainInfo/' + currentId,  // TODO:
            })
            .then(function(data) {
              var data = data.data
              that.baseAddOrEditForm = {
                erpCode: data.erpCode,
                name: data.name,
                projectCode: data.projectCode,
                projectName: data.projectName,
                projectStartTime: data.projectStartTime,
                projectEndTime: data.projectEndTime,
                requiredFinishTime: data.requiredFinishTime,
                proposerId: data.proposerId,
                companyId: data.companyId,
                depName: data.depName,
                remark: data.remark,
                createTime: data.createTime,
                createUserName: data.createUserName,
                createUserId: data.createUserId
              }
              that.proposerName = data.proposerName
              setTimeout(function() {
                that.visible = false
              }, 500)
            })
            .catch(function(err) {
              console.log(err)
            })
          },
          personChanged: function(newV) {
            this.baseAddOrEditForm.proposerId = newV[0].id
          },
          // 基本信息  保存
          baseInfoSave: function() {
            this.$v.baseAddOrEditForm.$touch()
            if (!this.$v.baseAddOrEditForm.$error) {
              this.baseAddOrEditForm.requiredFinishTime = timeUtil(this.baseAddOrEditForm.requiredFinishTime)
              this.baseAddOrEditForm.projectStartTime = timeUtil(this.baseAddOrEditForm.projectStartTime)
              this.baseAddOrEditForm.projectEndTime = timeUtil(this.baseAddOrEditForm.projectEndTime)
              if (this.addOrEdit == 2) {
                this.baseAddOrEditForm.id = this.currentId
                this.baseAddOrEditForm.code = this.currentCode
              }
              this.btnLoadingSave = true
              var that = this
              axios({
                method: 'post',
                url: '/manager/sor/main/save', 
                data: this.baseAddOrEditForm
              })
              .then(function(data) {
                if (data.success) {
                  that.$q.notify({
                    message: '操作成功',
                    type: 'positive',
                    icon: 'done',
                    timeout: 1000,
                    position: 'top-right'
                  })
                  that.currentId = data.data
                  that.disable = false
                  that.currentStep = 'details'
                  that.detailsDataGet({
                    pagination: that.serverPagination
                  })
                } else {
                  that.$q.notify({
                    message: data.msg,
                    type: 'negative',
                    icon: 'error_outline',
                    timeout: 1000,
                    position: 'top-right'
                  })
                }
                that.btnLoadingSave = false
              })
              .catch(function(err) {
                console.log(err)
              })
            }
          },
          // 编辑时  获取明细信息
          detailsDataGet: function(arg) {
            this.listLoading = true
            this.visible = true
            this.serverPagination = arg.pagination
            var that = this
            axios({
              method: 'post',
              url: '/manager/sor/item/query', 
              data: {
                page: this.serverPagination.page,
                rows: this.serverPagination.rowsPerPage,
                sort: this.serverPagination.sortBy,
                order: this.serverPagination.descending == true? 'desc' : (this.serverPagination.descending == false? 'asc' : null),
                search_LIKE_matName: this.searchForm.key == 'matName'? this.searchForm.value: '',
                search_LIKE_matCode: this.searchForm.key == 'matCode'? this.searchForm.value: '',
                search_EQ_headerId: this.currentId
              }
            })
            .then(function(data) {
              that.viewData = data.rows
              that.total = data.total
              that.listLoading = false
              
              that.btnLoadingSearch = false
              that.btnLoadingReset = false
              setTimeout(function() {
                that.visible = false
              }, 1000)
            })
            .catch(function(err) {
              console.log(err)
            })
          },
          // 明细 查询
          searchDetails: function() {
            this.btnLoadingSearch = true
            this.detailsDataGet({
              pagination: this.serverPagination
            })
          },
          resetDetails: function() {
            this.btnLoadingReset = true
            this.searchForm = {  
              value: '',
              key: 'matName'
            }
            this.detailsDataGet({
              pagination: this.serverPagination
            })
          },
          // 明细 新增 获取树节点数据
          codeTreeDataGet: function() {
            var that = this
            axios({
              method: 'post',
              url: '/manager/basedata/materialType/getMaterialTypeEasyuiTree',
              data: {
                id: ''
              }
            })
            .then(function(data) {
              var arr = []
              data.forEach(function(item) {
                var obj = {}
                obj.label = item.text
                obj.id = item.id
                if (item.children) {
                  obj.children = []
                  obj.lazy = true
                }
                arr.push(obj)
              })
              that.codeTreeData = arr
            })
            .catch(function(err) {
              console.log(err)
            })
          },
          // 明细 新增 获取货币数据
          currencyDataGet: function() {
            var that = this
            axios({
              method: 'post',
              url: '/manager/basedata/frameAgreement/getCurrencyList'
            })
            .then(function(data) {
              var arr = []
              data.forEach(function(item) {
                var obj = {}
                obj.label = item.currencyName
                obj.value = item.id
                arr.push(obj)
              })
              that.currencyOptions = arr
            })
            .catch(function(err) {
              console.log(err)
            })
          },
          codeChanged: function(newV) {
            this.rowAddOrEditForm.matId = newV[0].id
            this.rowAddOrEditForm.matCode = newV[0].code
            this.rowAddOrEditForm.matName = newV[0].name
          },
          costChanged: function(newV) {
            this.rowAddOrEditForm.costEngineerUserId = newV[0].id
            this.rowAddOrEditForm.costEngineerUserName = newV[0].name
          },
          ticked: function(newV) {
            this.rowAddOrEditForm.matCategoryCode = newV
          },
          // 根据勾选节点获取对应其它字段的数据
          otherDataGetById: function(id) {
            var that = this
            axios({
              method: 'post',
              url: '/manager/basedata/material/materialList',
              data: {
                id: id
              }
            })
            .then(function(data) {
              // console.log(data, 1111111);
            })
            .catch(function(err) {
              console.log(err)
            })
          },
          // 明细  单条新增、编辑
          detailsModalOpen: function(type, row) {
            if (type == 1) {
              this.detailsAddOrEdit = 1
              this.rowAddOrEditForm = {
                matId: '',
                matCode: '',
                matName: '',
                carSeriesName: '',
                matCategoryCode: '',
                matCategoryName: '',
                matState: '', 
                quantity: '', 
                unitId: '',
                carQuantity: '',
                costEngineerUserId: '',
                costEngineerUserName: '',
                matPictureCode: '',
                targetPrice: '', 
                currencyId: '',
                taxCode: '',
                deliveryTime: '',
                minOrderQty: ''
              }
              this.detailsAddOrEditModal = true
            }
            if (type == 2) {
              this.detailsAddOrEdit = 2
              this.currentRowId = row.id
              this.rowAddOrEditForm = {
                matId: row.matId,
                matCode: row.matCode,
                matName: row.matName,
                carSeriesName: row.carSeriesName,
                matCategoryCode: row.matCategoryCode,
                matCategoryName: row.matCategoryName,
                matState: row.matState,
                quantity: row.quantity,
                unitId: row.unitId,
                carQuantity: row.carQuantity,
                costEngineerUserId: row.costEngineerUserId,
                costEngineerUserName: row.costEngineerUserName,
                matPictureCode: row.matPictureCode,
                targetPrice: row.targetPrice,
                currencyId: row.currencyId,
                taxCode: row.taxCode,
                deliveryTime: row.deliveryTime,
                minOrderQty: row.minOrderQty
              }
              this.detailsAddOrEditModal = true
            }
            this.$v.rowAddOrEditForm.$reset()
          },
          detailsSaveConfirm: function(type) {
            this.$v.rowAddOrEditForm.$touch()
            if (!this.$v.rowAddOrEditForm.$error) {
              this.btnLoading = true
              var that = this
              var _data = {
                headerId: this.currentId,
                matId: this.rowAddOrEditForm.matId,
                matName: this.rowAddOrEditForm.matName,
                carSeriesName: this.rowAddOrEditForm.carSeriesName,
                matCategoryCode: this.rowAddOrEditForm.matCategoryCode, // 品类
                matState: this.rowAddOrEditForm.matState,
                quantity: this.rowAddOrEditForm.quantity,
                unitId: this.rowAddOrEditForm.unitId,
                carQuantity: this.rowAddOrEditForm.carQuantity,
                costEngineerUserId: this.rowAddOrEditForm.costEngineerUserId,
                costEngineerUserName: this.rowAddOrEditForm.costEngineerUserName,
                matPictureCode: this.rowAddOrEditForm.matPictureCode,
                targetPrice: this.rowAddOrEditForm.targetPrice,
                currencyId: this.rowAddOrEditForm.currencyId,
                taxCode: this.rowAddOrEditForm.taxCode,
                deliveryTime: this.rowAddOrEditForm.deliveryTime,
                minOrderQty: this.rowAddOrEditForm.minOrderQty,
              }
              if (type == 2) {
                _data.id = this.currentRowId
              }
              axios({
                method: 'post',
                url: '/manager/sor/item/save',
                data: _data
              })
              .then(function(data) {
                if (data.success) {
                  that.$q.notify({
                    message: '操作成功',
                    type: 'positive',
                    icon: 'done',
                    timeout: 1000,
                    position: 'top-right'
                  })
                  that.detailsAddOrEditModal = false
                  that.detailsDataGet({ pagination: that.serverPagination })
                } else {
                  that.$q.notify({
                    message: data.msg,
                    type: 'negative',
                    icon: 'error_outline',
                    timeout: 1000,
                    position: 'top-right'
                  })
                }
                that.btnLoading = false
              })
              .catch(function(err) {
                console.log(err)
              })
            }
          },
          detailsDelConfirm: function() {
            var that = this
            if (this.selected.length > 0) {
              this.$q.dialog({
                title: '确认',
                message: '确认要删除选中的'+ this.selected.length + '条数据吗？',
                ok: {
                  label: '确认',
                  flat: true
                },
                cancel: {
                  label: '取消',
                  flat: true
                }
              })
              .then(function() {
                var idSelected = []
                that.selected.forEach(function(e) {
                  idSelected.push(e.id)
                })
                axios({
                  method: 'post',
                  url: '/manager/sor/item/delete', 
                  data: {
                    ids: idSelected.join(',')
                  }
                })
                .then(function(data) {
                  if (data.success) {
                    that.$q.notify({
                      message: '操作成功',
                      type: 'positive',
                      icon: 'done',
                      timeout: 1000,
                      position: 'top-right'
                    })
                  } else {
                    that.$q.notify({
                      message: data.msg,
                      type: 'negative',
                      icon: 'error_outline',
                      timeout: 1000,
                      position: 'top-right'
                    })
                  }
                  that.detailsDataGet({ pagination: that.serverPagination })
                })
                .catch(function(err) {
                  console.log(err)
                })
              })
              .catch(function() {
                // 选择"Cancel"或作了关闭操作
              })
            } else {
              this.$q.notify({
                message: '请先勾选，再执行该操作！',
                type: 'warning',
                icon: 'warning',
                position: 'top-right'
              })
            }
          },
          // 编辑时  获取计划信息
          planDataGet: function() {
            this.visible = true
            var that = this
            axios({
              method: 'post',
              url: '/manager/sor/plan/getByHeaderId/' + this.currentId,  // TODO:
            })
            .then(function(data) {
              var _data = []
              data.data.forEach(function(item) {
                var _obj = {}
                _obj.headerId = item.headerId
                _obj.id = item.id
                _obj.itemNo = item.itemNo
                _obj.stepName = item.stepName
                _obj.stepCode = item.stepCode
                _obj.planStartTime = item.planStartTime
                _obj.planEndTime = item.planEndTime
                _obj.realStartTime = item.realStartTime
                _obj.realEndTime = item.realEndTime
                _obj.createTime = item.createTime
                _obj.createUserName = item.createUserName
                _obj.createUserId = item.createUserId
                _data.push(_obj)
              })
              that.planData = _data
              setTimeout(function() {
                that.visible = false
              }, 1000);
            })
            .catch(function(err) {
              console.log(err)
            })
          },
          // 计划 保存
          planSave: function() {
            this.btnLoadingSave = true
            var that = this
            this.planData.forEach(function(item) {
              item.planStartTime = timeUtil(item.planStartTime)
              item.planEndTime = timeUtil(item.planEndTime)
              console.log(item.planEndTime, 'item.planEndTime');
            })
            axios({
              method: 'post',
              url: '/manager/sor/plan/save',
              data: {
                sorPlanJsonStr: JSON.stringify(this.planData)
              }
            })
            .then(function(data) {
              if (data.success) {
                that.$q.notify({
                  message: '操作成功',
                  type: 'positive',
                  icon: 'done',
                  timeout: 1000,
                  position: 'top-right'
                })
                that.planDataGet()
              } else {
                that.$q.notify({
                  message: data.msg,
                  type: 'negative',
                  icon: 'error_outline',
                  timeout: 1000,
                  position: 'top-right'
                })
              }
              that.btnLoadingSave = false
            })
            .catch(function(err) {
              console.log(err)
            })
          },
          // 激活
          activeConfirm: function() {
            var that = this
            this.$q.dialog({
              title: '确认',
              message: '确认要执行激活操作吗？',
              ok: {
                label: '确认',
                flat: true
              },
              cancel: {
                label: '取消',
                flat: true
              }
            })
            .then(function() {
              console.log(that.currentId);
              axios({
                method: 'post',
                url: '/manager/sor/main/active', 
                data: {
                  ids: that.currentId
                }
              })
              .then(function(data) {
                if (data.success) {
                  that.$q.notify({
                    message: '操作成功',
                    type: 'positive',
                    icon: 'done',
                    timeout: 1000,
                    position: 'top-right'
                  })
                  setTimeout(function() {
                    window.location.href="./sorManage.html"
                  }, 1000)
                } else {
                  that.$q.notify({
                    message: data.msg,
                    type: 'negative',
                    icon: 'error_outline',
                    timeout: 1000,
                    position: 'top-right'
                  })
                }
              })
              .catch(function(err) {
                console.log(err)
              })
            })
            .catch(function(err) {
              console.log(err)
            })
          },
          // 各种数据获取
          // 公司 获取
          companyDataGet: function() {
            var that = this
            axios({
              method: 'post',
              url: '/manager/rfq/main/getPurOrgList',
            })
            .then(function(data) {
              var a = []
              data.forEach(function(e) {
                var o = {}
                o.label = e.name
                o.value = e.id
                a.push(o)
              })
              that.companyOptions = a
            })
            .catch(function(err) {
              console.log(err)
            })
          },
          // 税码 获取
          taxCodeDataGet: function() {
            var that = this
            axios({
              method: 'post',
              url: '/manager/basedata/frameAgreement/getTaxList',
            })
            .then(function(data) {
              var a = []
              data.forEach(function(e) {
                var o = {}
                o.label = e.taxName
                o.value = e.taxCode
                a.push(o)
              })
              that.taxCodeOptions = a
            })
            .catch(function(err) {
              console.log(err)
            })
          },
          // 单位 获取
          unitDataGet: function() {
            var that = this
            axios({
              method: 'post',
              url: '/manager/basedata/frameAgreement/getUnitList',
            })
            .then(function(data) {
              var a = []
              data.forEach(function(e) {
                var o = {}
                o.label = e.unitName
                o.value = e.id
                a.push(o)
              })
              that.unitOptions = a
            })
            .catch(function(err) {
              console.log(err)
            })
          },
        }
      })
    </script>
  </body>
</html>